<template>
	<view class="container">
		<u--form ref="groupForm" :data="group" labelWidth="160rpx">
			<u-form-item label="叫料模式" prop="selectMode">
			  <uni-data-select
			  	:clear="false"
			  	v-model="group.selectMode"
			  	:localdata="modeList"
					@change="fromChange($event, 1)"
			  ></uni-data-select>
			</u-form-item>
			<u-form-item label="叫料线体" prop="selectLine">
			  <uni-data-select
			  	:clear="false"
			  	v-model="group.selectLine"
			  	:localdata="lineList"
					@change="fromChange($event, 2)"
			  ></uni-data-select>
			</u-form-item>
			<u-form-item label="叫料工单" prop="selectOrder">
			  <uni-data-select
			  	:clear="false"
			  	v-model="group.selectOrder"
			  	:localdata="orderList"
					@change="fromChange($event, 3)"
			  ></uni-data-select>
			</u-form-item>
			<u-form-item label="半成品物编" prop="selectCode">
			  <uni-data-select
			  	:clear="false"
			  	v-model="group.selectCode"
			  	:localdata="codeList"
					@change="fromChange($event, 4)"
			  ></uni-data-select>
			</u-form-item>
		</u--form>
		<uni-table ref="info" border stripe emptyText="暂无数据" style="margin: 10px 0">
			<uni-tr>
				<uni-th width="150">叫料物料</uni-th>
				<uni-th width="150">叫料数量</uni-th>
			</uni-tr>
			<uni-tr v-for="(item, index) in materialList" :key="index" class="td-container">
				<uni-td width="150">{{ item.materialCode }}</uni-td>
				<uni-td width="150">{{ item.qty }}</uni-td>
			</uni-tr>
		</uni-table>
		<view class="commonButton">
			<u-button type="primary" @click="confrimCall">确认叫料</u-button>
			<u-button type="warning" @click="reset">重置</u-button>
		</view>
	</view>
</template>

<script>
	import { 
		getModeListAPI,
		getLineListAPI,
		getOrderListAPI,
		getCodeListAPI,
		getMaterialListAPI,
		confirmCallAPI
	} from '@/api/work/other.js'
	import {
		uniCard,
		uniTable,
		uniTr,
		uniTd,
		uniTh
	} from '@dcloudio/uni-ui'
	import uniDataSelect from '../../../node_modules/@dcloudio/uni-ui/lib/uni-data-select/uni-data-select.vue'
	export default {
		components: {
			uniCard,
			uniTable,
			uniTr,
			uniTd,
			uniTh,
			uniDataSelect
		},
		data() {
			return {
				group: {
					selectMode: '',
					selectLine: '',
					selectOrder: '',
					selectCode: ''
				},
				modeList: [],
				lineList: [],
				orderList: [],
				codeList: [],
				// 物料列表
				materialList: []
			};
		},
		mounted() {
		},
		methods: {
			async fromChange(e, index) {
				const submitForm = {
					selectMode: '',
					selectLine: '',
					selectOrder: '',
					selectCode: ''
				}
				switch(index) {
					case 1:
						submitForm.selectMode = e
						this.group.selectLine = ''
						this.group.selectOrder = ''
						this.group.selectCode = ''
						this.orderList = []
						this.materialList = []
						break
					case 2:
						submitForm.selectMode = this.group.selectMode
						submitForm.selectLine = e
						this.group.selectOrder = ''
						this.group.selectCode = ''
						this.materialList = []
						break
					case 3:
						submitForm.selectMode = this.group.selectMode
						submitForm.selectLine = this.group.selectLine
						submitForm.selectOrder = e
						this.group.selectCode = ''
						break
					case 4:
						submitForm.selectMode = this.group.selectMode
						submitForm.selectLine = this.group.selectLine
						submitForm.selectOrder = this.group.selectOrder
						submitForm.selectCode = e
						break
					const res = await getListAPI(submitForm)
					console.log(res)
					if (res.code === 200) {
						switch(index) {
							case 1:
								// 获取第二个列表的数据
								break
							case 2:
								// 获取第三个列表的数据
								break
							case 3:
								// 获取第四个列表的数据
								break
							case 4:
								break
						}
					} else {
						return this.$refs.uToast.show({
							type: 'warning',
							message: res.message
						})
					}
				}
			},
			// ----------------------------------------------------
			// 确认叫料
			confrimCall() {},
			// 重置
			reset() {
				this.group = {
					selectMode: '',
					selectLine: '',
					selectOrder: '',
					selectCode: ''
				}
				this.modeList = []
				this.lineList = []
				this.orderList = []
				this.codeList = []
				this.materialList = []
			}
		}
	}
</script>

<style lang="scss">
.commonButton {
	width: 100%;
	display: flex;
	gap: 20rpx;
	position: fixed;
	left: 0;
	bottom: 0;
	box-sizing: border-box;
	padding: 15rpx;
	justify-content: space-between;
}
</style>
